<template>
    <main-wrap ref="mianEle" :loading="true" :load="onLoad" :end="page.finished" :showOverTxt="page.lists.length>0">
        <template v-slot:header>
                <Header title="我参加的拍卖"/>
                <div class="ctopBox">
                        <my-tab v-model="active" :space="true" :lists='[
                            {title:"进行中",name:0},
                            {title:"已中标",name:1},
                            {title:"未中标",name:2}
                            ]' 
                            @change="getData"/>
                </div>
        </template>
        <div class="mainbox">
            <product-list v-if="page.lists.length>0" :lists="page.lists"/>
            <empty v-if="page.finished && page.lists.length<1"/>
        </div>
              
    </main-wrap>
</template>

<script>
import {reactive,toRefs, onMounted,computed,getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import {Toast} from 'vant'
import Header from '@/components/header.vue'
import mainWrap from '@/components/mainWrap.vue'
import myTab from '@/components/myTab.vue'
import productList from './components/productList.vue'
import Tscroll from '@/components/Tscroll.vue'
import empty from '@/components/empty.vue'
export default {
    components:{
        mainWrap,
        Header,
        myTab,
        productList,
        Tscroll,
        empty
    },
    setup(props,context){
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            keyword:'',
            active:0,
            page:{
                lists:[],
                pageIndex:1,
                pageSize:15,
                finished: false
            },
            st:''
        })

        onMounted(()=>{
           onLoad()
        })

        const onLoad = ()=> {
            state.st && clearTimeout(state.st)
            // 此函数必须返回一个Promise对象
            return new Promise((resolve, reject) => {
                state.st = setTimeout(async () => {
                    const res = await store.dispatch("arApi/my_jion_auction", {
                        page: state.page.pageIndex,
                        limit: state.page.pageSize,
                        //orderField: "",
                        //orderType: "",
                        bidStatus:state.active
                    });
                    state.page.lists = [...state.page.lists, ...res.data];
                    state.page.pageIndex++;
                    if (state.page.lists.length >= res.count) {
                        state.page.finished = true;
                    }
                    resolve(true);
                }, 500);
            });
        }

        const getData = async ()=>{
            proxy.$refs.mianEle.stopScroll()
            state.page.lists=[]
            state.page.pageIndex=1
            state.page.finished=false
            await onLoad()
            proxy.$refs.mianEle.initScroll()
        }

        return {
            ...toRefs(state),
            onLoad,
            getData
        }
    }
}
</script>

<style lang="scss" scoped>
    .ctopBox{
        padding: 15px 38px 0 38px;
    }
    .mainbox{
        padding: 30px 40px 10px 40px;
    }
   
</style>